<script setup>
import { reactive, ref } from "vue";

const currentIndex = ref(1);
const lists = reactive([
  {
    id: 1,
    title: "新闻",
    content: "新闻 新闻 新闻 新闻 新闻 新闻",
  },
  {
    id: 2,
    title: "热点",
    content: "热点 热点 热点 热点 热点 热点",
  },
]);
</script>

<template>
  <ul class="tab-tit">
    <li v-for="(v, i) in lists" :key="v.id" :class="{ active: i === currentIndex }" @click="currentIndex = i">
      {{ v.title }}
    </li>
  </ul>

  <div class="tab-con">
    <div v-for="(v, i) in lists" :key="v.id" v-show="currentIndex === i">{{ v.content }}</div>
  </div>
</template>

<style scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

.tab-tit li {
  padding: 10px 15px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.tab-tit .active {
  color: #f60;
  border-bottom: 2px solid #f60;
  background-color: #fae264;
  border-radius: 10px 0;
}

.tab-con div {
  margin: 30px;
}
</style>
